<template>
  <div>
    <h2>用户反馈管理</h2>
    <el-table :data="feedbacks" style="width: 100%" v-loading="loading">
      <el-table-column prop="id" label="反馈ID" width="180"></el-table-column>
      <el-table-column prop="content" label="反馈内容"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180">
        <template #default="{ row }">
          {{ dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-button @click="handlePrevPage" :disabled="currentPage === 1"
        >上一页</el-button
      >
      <span>第 {{ currentPage }} 页</span>
      <el-button
        @click="handleNextPage"
        :disabled="currentPage * pageSize >= totalFeedbacks"
        >下一页</el-button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, onMounted } from "vue";
const instance = getCurrentInstance();
const proxy = instance?.proxy as any;
import dayjs from "dayjs";

import { useUserStore } from "@/stores/userStore";
const userStore = useUserStore();
const userData = userStore.getUserData();
import { RequestParams } from "@/types/request";
import { FeedbackInfo } from "@/types/admin";

const feedbacks = ref<FeedbackInfo[]>([]);
const currentPage = ref<number>(1);
const totalFeedbacks = ref<number>(0);
const pageSize = ref(10);
const loading = ref<boolean>(false);

const fetchFeedbacks = async (page = 1) => {
  loading.value = true;
  try {
    let result: any = await proxy.request({
      method: "get",
      url: proxy.api.manageFeedback,
      params: {
        page: page,
        pageSize: pageSize.value,
      } as RequestParams,
      headers: {
        authentication: userData.token,
      },
      showLoading: false,
    });
    if (!result) {
      return;
    }
    feedbacks.value = result.data.records;
    totalFeedbacks.value = result.data.total;
  } catch (error) {
    proxy.message.error("获取反馈列表失败，请检查网络连接");
  } finally {
    loading.value = false;
  }
};

const handleNextPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
    fetchFeedbacks(currentPage.value);
  }
};
const handlePrevPage = () => {
  if (currentPage.value * pageSize.value < totalFeedbacks.value) {
    currentPage.value++;
    fetchFeedbacks(currentPage.value);
  }
};

onMounted(() => {
  fetchFeedbacks();
});
</script>

<style scoped>
h2 {
  margin-bottom: 20px;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.pagination span {
  margin: 0 10px;
}
</style>
